<template>
  <div class="details">
  <CommonHeader />
  <Introduction />
  <JoinTeam />
  <Comments :CommentsData="CommentsData"/>
  <HotTopic :hottopic="hottopic" :members="members" />
  </div>
</template>

<script>
import CommonHeader from "../../components/CommonHeader"
import Introduction from "../../components/BlueberryComment/Introduction"
import JoinTeam from "../../components/BlueberryComment/JoinTeam"
import Comments from "../../components/BlueberryComment/Comments"
import HotTopic from "../../components/BlueberryComment/HotTopic"

export default {
  name: 'BlueberryDetails',
  data(){
    return{
      CommentsData:[],
      hottopic:[],
      members:[]
    }
  },
  components:{
    CommonHeader,
    Introduction,
    JoinTeam,
    Comments,
    HotTopic
  },
  mounted(){
    this.$axios.get(this.HOST + "/api/blueBerrydetails")
    .then(res=>{
      this.CommentsData = res.data.comment;
      this.hottopic = res.data.hottopic;
      this.members = res.data.members;
      // console.log(res.data.hottopic)
      // console.log(res.data.members)
    })
    .catch(error=>{
      console.log(error)
    })
  }
}
</script>

<style>

</style>